<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>市场雷达</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/media.css">
</head>

<body id="market">
    <div id="header"></div>
    <!-- -------------------主体----------------- -->
    <section class="industry-main">
        <section class="page1">
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-sm-12 col-xs-12">
                        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                            <!-- Indicators  -->
                            <ol class="carousel-indicators" id="indicators">
                            </ol>
                            <!-- Wrapper for slides -->
                            <div class="carousel-inner" role="listbox" id="listbox">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-12 hidden-xs">
                        <div class="item-flex">
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="page3">
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-sm-12 col-xs-12">
                        <div class="page3-left">
                            <!-- 二级栏目列表 -->
                            <ul class="nav nav-tabs" role="tablist" id="market-nav">
                            </ul>
                            <!-- 二级栏目列表内容 -->
                            <div class="tab-content">
                                <div role="tabpanel" class="tab-pane active" id="home">
                                </div>
                                <a href="javaScript:;" class="btn btn-primary" id="more">查看更多</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-12 col-xs-12">
                        <div class="page3-right market">
                            <!-- Nav tabs -->
                            <ul class="nav nav-tabs" role="tablist">
                                <li role="presentation" class="active"><a href="#recommend" aria-controls="recommend" role="tab" data-toggle="tab" style="width: 100%;">推荐文章</a></li>
                            </ul>
                            <!-- Tab panes -->
                            <div class="tab-content">
                                <div role="tabpanel" class="tab-pane active" id="recommend">
                                    <a href="#" class="btn btn-primary">展开更多</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </section>
    <div id="footer"></div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"> </script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<!-- <script src="js/core.js"></script> -->
<script src="js/mine.js"></script>
<script src="js/core.js"></script>
<script>
$(function() {
    $("#header").load("./header.html")
    $("#footer").load("./footer.html")
    Getdata(market).then(res => {
        console.log(res)
        var li = "";
        $.each(res.data, function(index, val) {
            li = `<li role="presentation"><a href="#home" aria-controls="home" role="tab" data-id="${val.id}"
                        data-toggle="tab">${val.name}</a></li>`;
            $("#market-nav").append(li);
        });
        console.log($("#market-nav li"))
        //第一个li添加选中样式
        $("#market-nav li").first().addClass("active");

        // 获取第一个栏目的id
        let categoryIdFirst = $("#market-nav li").first().children().data("id");
        //查询 顶部动态

        Getdata(columnList, { categoryId: categoryIdFirst,isTop:1, size: 4, current: 1, level: 2 }).then(res => {
            let topItem = "";
            let liDot = '';//点数
            $.each(res.data.records,function(index,val){
                topItem += `<div class="item">
                                    <div class="carousel-caption">
                                        <a href="detail.html?id=${val.id}">
                                            <div class="txtL">
                                                <p class="tit">${val.title}</p>
                                                <p class="des">${val.summary}</p>
                                            </div>
                                            <div class="imgR">
                                                <img src="${val.newsPath}" alt="">
                                            </div>
                                        </a>
                                    </div>
                                </div>`;
                liDot += `<li data-target="#carousel-example-generic" data-slide-to="${index}"></li>`
            })
            $("#listbox").html(topItem);
            $("#indicators").html(liDot);
            $("#listbox .item").first().addClass("active");
            $("#indicators li").first().addClass("active");
            console.log(res) 
        })
        // 渲染顶部侧栏的动态item-flex
        let categoryIdSecond = $("#market-nav li").eq(1).children().data("id");
        Getdata(columnList, { categoryId: categoryIdSecond,isTop:1, size: 2, current: 1, level: 2 }).then(res => {
            console.log(res)
            let sideItem = "";
            let summary = "";
            $.each(res.data.records,function(index,val){
                summary = val.summary.substring(0,35);
                sideItem += `<div class="item clearfix">
                                <div class="txt">
                                    <a href="detail.html?id=${val.id}">
                                        <p class="tit">${val.title}</p>
                                    </a>
                                    <p class="des">${summary}...</p>
                                </div>
                                <div class="img"><a href="detail.html?id=${val.id}"><img class="img-responsive" src="${val.newsPath}" alt=""></a></div>
                            </div>`;
            })
            $(".page1 .item-flex").html(sideItem);
        })








        Getdata(columnList, { categoryId: categoryIdFirst, siez: 10, current: 1, level: 2 }).then(res => {
            console.log(res)
            var item1 = "";
            $.each(res.data.records, function(index, val) {
                item1 += `<div class="item clearfix">
                            <div class="img"><img src="${val.newsPath}" alt=""></div>
                            <div class="des">
                                <a href="detail.html?id=${val.id}">
                                    <p class="tit">${val.title}</p>
                                </a>
                                <p class="tit-des">${val.summary}</p>
                                <div class="btn-group">
                                    <a href="detail.html?id=${val.id}" class="btn">${val.popularTags}</a>
                                </div>
                                <div class="date"><i class="glyphicon glyphicon-time"></i><span
                                        class="year">${val.gmtDatetime}</span></div>
                            </div>
                        </div>`;
            })
            $("#home").html(item1);
        })
        // 栏目点击切换列表
        let categoryId = '';
        $.each($("#market-nav li"), function(index, val) {
            //获取所有的栏目的id
            
            $("#market-nav li").eq(index).click(function() {
                size1 = 10;
                categoryId = $("#market-nav li").eq(index).children().data("id");
                Getdata(columnList, { categoryId, siez: 10, current: 1, level: 2 }).then(res => {
                    console.log(res)
                    var item = "";
                    $.each(res.data.records, function(index, val) {
                        item += `<div class="item clearfix">
                                        <div class="img"><img src="${val.newsPath}" alt=""></div>
                                        <div class="des">
                                            <a href="detail.html">
                                                <p class="tit">${val.title}</p>
                                            </a>
                                            <p class="tit-des">${val.summary}</p>
                                            <div class="btn-group">
                                                <a href="detail.html" class="btn">${val.popularTags}</a>
                                            </div>
                                            <div class="date"><i class="glyphicon glyphicon-time"></i><span class="year">${val.gmtDatetime}</span></div>
                                        </div>
                                    </div>`;
                    })
                    $("#home").html(item);
                })
            })
        })



        // 加载更多
        let size1 = 10;
        $("#more").click(function(){
            if (categoryId != "" && categoryId != $("#market-nav .active a").data("id")) {
                size1 = 10;
            }
            size1 += 10;
            categoryId = $("#market-nav .active").children().data("id");
            Getdata(columnList, { categoryId, siez: size1, current: 1, level: 2 }).then(res => {
                    console.log(res)
                    var item = "";
                    $.each(res.data.records, function(index, val) {
                        item += `<div class="item clearfix">
                                        <div class="img"><img src="${val.newsPath}" alt=""></div>
                                        <div class="des">
                                            <a href="detail.html">
                                                <p class="tit">${val.title}</p>
                                            </a>
                                            <p class="tit-des">${val.summary}</p>
                                            <div class="btn-group">
                                                <a href="detail.html" class="btn">${val.popularTags}</a>
                                            </div>
                                            <div class="date"><i class="glyphicon glyphicon-time"></i><span class="year">${val.gmtDatetime}</span></div>
                                        </div>
                                    </div>`;
                    })
                    $("#home").html(item);
                })
        })






    })





















});
</script>

</html>